<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>物业管理系统</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/zTree/v3/css/metroStyle/metroStyle.css" type="text/css">
</head>
<body style="padding-bottom: 90px; background-color: #ECF0F5;">
	<form class="form form-horizontal" id="form-menu" method="post" onsubmit="return submitMenu();">
		<section class="content" style="margin: 15px; background-color: white;">
			<div class="row">
				<div class="col-sm-3">
					<input id="ztreeId" name="ztreeId" type="hidden" value="" /> <input id="ztreePId" name="ztreePId" type="hidden" value="" />
					<ul id="menuTree" class="ztree" style="margin: 10px 0 0 15px;"></ul>
				</div>
				<div class="col-sm-9">
					<div class="col-sm-12">
						<div class="row">
							<div class="btn-group btn-default">
								<button type="button" class="glyphicon glyphicon-plus btn btn-primary btn-sm" onclick="addMenu('peer');">新建同级菜单</button>
							</div>
							<div class="btn-group btn-default">
								<button type="button" class="glyphicon glyphicon-plus btn btn-primary btn-sm" onclick="addMenu('lower');">新建下级菜单</button>
							</div>
							<div class="btn-group btn-default">
								<button type="button" class="glyphicon glyphicon-pencil btn btn-primary btn-sm" onclick="editMenu()">编辑</button>
							</div>
							<div class="btn-group btn-default">
								<button type="button" class="glyphicon glyphicon-trash btn btn-danger btn-sm" onclick="delMenu()">删除</button>
							</div>
						</div>
						<br />
						<div class="row">
							<div class="input-group">
								<span class="input-group-addon">上级菜单：</span> <input type="text" class="form-control" id="parentName" value="" disabled="disabled">
							</div>
						</div>
						<br />
						<div class="row">
							<div class="input-group">
								<span class="input-group-addon">菜单名称：</span> <input type="text" class="form-control" id="menuName" name="menuName" value="" disabled="disabled">
							</div>
						</div>
						<br />
						<div class="row">
							<div class="input-group">
								<span class="input-group-addon">菜单编号：</span> <input type="text" onchange="checkCode();" class="form-control" id="menuCode" name="menuCode" value="" disabled="disabled">
							</div>
						</div>
						<br />
						<div class="row">
							<div class="input-group">
								<span class="input-group-addon">菜单顺序：</span> <input type="text" class="form-control" id="sortId" name="sortId" value="" disabled="disabled">
							</div>
						</div>
						<br />
						<div class="row">
							<div class="input-group">
								<span class="input-group-addon">菜单路径：</span> <input type="text" class="form-control" id="menuUrl" name="menuUrl" value="" disabled="disabled">
							</div>
						</div>
						<br />
						<div class="row">
							<div class="btn-group btn-default">
								<button id="submitBtn" class="btn btn-primary btn-sm hidden" type="submit">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
							</div>
							<div class="btn-group btn-default">
								<button id="cancelBtn" class="btn btn-danger btn-sm hidden" type="button" onclick="cancelEdit()">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</form>
</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<script src="${pageContext.request.contextPath}/plugins/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script>
	var zTree;
	var checkedNode = null;
	var url;
	var checkCodeFlag = false;
	var setting = {
		data : {
			key : {
				children : 'children',
				name : 'menuName'
			}
		},
		view : {
			txtSelectedEnable : true
		},
		callback : {
			onClick : function(event, treeId, treeNode) {
				checkedNode = treeNode;
				nodeClick(treeNode);
			}
		}
	};

	$(function() {
		loadTree();
	});

	function loadTree() {
		//查询菜单树,初始化ztree
		$.ajax({
			url : "${pageContext.request.contextPath}/selectMenuTreeAll",
			type : "get",
			dataType : "json",
			async : true,
			success : function(data) {
				if (data !== null) {
					$.fn.zTree.init($("#menuTree"), setting, data);
					zTree = $.fn.zTree.getZTreeObj("menuTree");
					zTree.expandAll(true);
				}
			},
			error : function(error) {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
			}
		});
	}

	function nodeClick(treeNode) {
		if (treeNode !== null) {
			$('#ztreeId').val(treeNode.ztreeId);
			$('#menuName').val(treeNode.menuName);
			$('#sortId').val(treeNode.sortId);
			$('#menuCode').val(treeNode.menuCode);
			$('#menuUrl').val(treeNode.menuUrl === undefined ? '' : treeNode.menuUrl);
			var parentNode = treeNode.getParentNode();
			$('#parentName').val(parentNode === null ? '' : parentNode.menuName);
		}
	}

	//新增
	function addMenu(level) {
		if (checkedNode === null) {
			layer.alert('请先选择菜单！');
			return;
		}
		if (level === 'peer') {
			if (checkedNode.getParentNode() === null) {
				$('#ztreePId').val('0');
				$('#parentName').val('');

			} else {
				$('#ztreePId').val(checkedNode.getParentNode().ztreeId);
				$('#parentName').val(checkedNode.getParentNode().menuName);
			}

		} else if (level === 'lower') {
			$('#ztreePId').val(checkedNode.ztreeId);
			$('#parentName').val(checkedNode.menuName);
		}
		$('#ztreeId').val('');
		$('#menuName').val('');
		$('#menuCode').val('');
		$('#menuUrl').val('');
		$('#sortId').val('');

		$('#cancelBtn').removeClass('hidden');
		$('#submitBtn').removeClass('hidden');
		$('#menuName').prop('disabled', false);
		$('#menuCode').prop('disabled', false);
		$('#menuUrl').prop('disabled', false);
		$('#sortId').prop('disabled', false);

		url = '${pageContext.request.contextPath}/insertMenu';
	}

	//删除
	function delMenu() {
		console.log(checkedNode)
		if (checkedNode === null) {
			layer.alert('请先选择菜单！');
		} else {
			var msg;
			if (checkedNode.isParent) {
				msg = '此操作会一并删除下级菜单，确认吗？';
			} else {
				msg = '确认删除吗？';
			}
			layer.confirm(msg, function(index) {
				$.ajax({
					url : '${pageContext.request.contextPath}/deleteMenu',
					type : "post",
					dataType : "json",
					async : false,
					data : {
						ztreeId : checkedNode.ztreeId
					},
					success : function(data) {
						if (data.result === 0) {
							layer.msg('删除成功!', {
								icon : 1,
								time : 800
							});
							cancelEdit();
							loadTree();
						} else {
							layer.msg('系统繁忙，请稍后再试!', {
								icon : 2,
								time : 800
							});
						}
					},
					error : function() {
						layer.msg('系统繁忙，请稍后再试!', {
							icon : 2,
							time : 800
						});
						return false;
					}
				});
			});
		}
	}

	//编辑
	function editMenu() {
		if ($('#ztreeId').val() === '') {
			layer.alert('请先选择菜单！');
		} else {
			$('#cancelBtn').removeClass('hidden');
			$('#submitBtn').removeClass('hidden');
			$('#menuName').prop('disabled', false);
			$('#menuUrl').prop('disabled', false);
			$('#sortId').prop('disabled', false);
			console.log(checkedNode)
			url = '${pageContext.request.contextPath}/updateMenu';
		}
	}

	//取消
	function cancelEdit() {
		$('#cancelBtn').addClass('hidden');
		$('#submitBtn').addClass('hidden');
		$('#menuName').prop('disabled', true);
		$('#menuCode').prop('disabled', true);
		$('#sortId').prop('disabled', true);
		$('#menuUrl').prop('disabled', true);
		nodeClick(checkedNode);
	}

	//验证编号是否被使用
	function checkCode() {
		$.ajax({
			url : "${pageContext.request.contextPath}/checkMenuCode",
			type : "post",
			dataType : "json",
			async : false,
			data : {
				menuCode : $('#menuCode').val()
			},
			success : function(data) {
				console.log(data);
				if (data.result === 0) {
					checkCodeFlag = true;
				} else {
					checkCodeFlag = false;
				}
			},
			error : function() {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
			}
		});
	}

	//提交表单
	function submitMenu() {
		if ($('#menuName').val() === '' || $('#menuName').val() === null) {
			layer.alert('请输入菜单名称！');
			return false;
		}
		if ($('#menuCode').val() === '' || $('#menuCode').val() === null) {
			layer.alert('请输入菜单编号！');
			return false;
		}

		if ($('#sortId').val() === '' || $('#sortId').val() === null) {
			layer.alert('请输入菜单顺序编号！');
			return false;
		}

		if ($('#ztreeId').val() === '' && !checkCodeFlag) {
			layer.alert('菜单编号已被使用！');
			return false;
		}

		$.ajax({
			url : url,
			type : "post",
			dataType : "json",
			async : false,
			data : $('#form-menu').serialize(),
			success : function(data) {
				if (data.result === 0) {
					layer.msg('操作成功!', {
						icon : 1,
						time : 800
					});
					cancelEdit();
					loadTree();
					//                    nodeClick(checkedNode);
				} else {
					layer.msg('系统繁忙，请稍后再试!', {
						icon : 2,
						time : 800
					});
				}
			},
			error : function() {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
				return false;
			}
		});

		return false;
	}
</script>
</html>
